<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form-model :model="info" ref="ruleForm" :rules="rules" @submit.native.prevent>
      <a-form-model-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsName">
        <a-input size="large" v-model="info.goodsName" />
      </a-form-model-item>
      <!-- <a-form-model-item label="商品类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
        <a-radio-group v-model="info.categoryId" style="padding-top: 6px">
          <a-radio :value="1"> 虚拟商品 </a-radio>
          <a-radio :value="2"> 实物 </a-radio>
        </a-radio-group>
      </a-form-model-item> -->
      <a-form-model-item label="商品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="thumb">
        <single-image :url="info.thumb" @ok="(url) => {
          info.thumb = url;
          $refs.ruleForm.clearValidate('thumb')}"
          />
      </a-form-model-item>
      <a-form-model-item label="商品描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsIntro">
        <a-input type="textarea" rows="8" size="large" v-model="info.goodsIntro" />
      </a-form-model-item>
      <a-form-model-item label="商品备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsRemark">
        <a-input size="large" v-model="info.goodsRemark" />
      </a-form-model-item>
      <a-form-model-item label="所需积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="credit">
        <a-input-number size="large" v-model="info.credit" style="width: 200px" />
      </a-form-model-item>
      <a-form-model-item label="商品价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="marketPrice">
        <a-input-number size="large" v-model="info.marketPrice" style="width: 200px" />
      </a-form-model-item>
      <a-form-model-item label="商品库存" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="stock">
        <a-input-number size="large" v-model="info.stock" style="width: 200px" />
        <a-checkbox @change="onStockChange" style="margin-left: 20px">暂无库存</a-checkbox>
      </a-form-model-item>
      <a-form-model-item label="订单补充字段" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-checkbox-group v-model="info.models" style="padding-top: 6px">
          <a-checkbox :value="item.modelId" v-for="item in extraFieldList" :key="item.modelId">
            {{ item.modelName }}
          </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="领取人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input-number size="large" v-model="info.viewCount" style="width: 200px" />
      </a-form-model-item>
      <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input-number size="large" v-model="info.sort" style="width: 200px" />
      </a-form-model-item>
      <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
        <a-radio-group v-model="info.status" style="padding-top: 6px">
          <a-radio :value="1"> 上架 </a-radio>
          <a-radio :value="0"> 下架 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button
          htmlType="submit"
          type="primary"
          :loading="state.submitBtn"
          :disabled="state.submitBtn"
          @click="onSubmit"
          >保存</a-button
        >
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
// import pick from 'lodash.pick'
import SingleImage from '@/components/Upload/SingleImage'

export default {
  name: 'GoodsEdit',
  components: {
    SingleImage
  },
  data() {
    return {
      id: this.$route.params.id || '',
      info: {},
      rules: {
        goodsName: [{ required: true, message: '商品名称必填', trigger: ['blur', 'change'] }],
        // categoryId: [{ required: true, message: '商品类型必选', trigger: 'change' }],
        // brandId: [{ required: true, message: '商品品牌必选', trigger: 'change' }],
        goodsIntro: [{ required: true, message: '商品描述必填', trigger: ['blur', 'change'] }],
        goodsRemark: [{ required: true, message: '商品备注必填', trigger: ['blur', 'change'] }],
        credit: [{ required: true, message: '所需积分必填', trigger: ['blur', 'change'] }],
        stock: [{ required: true, message: '库存必填', trigger: ['blur', 'change'] }],
        thumb: [{ required: true, message: '商品图片必传', trigger: 'change' }],
        status: [{ required: true, message: '状态必选', trigger: 'change' }]
      },
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      extraFieldList: []
    }
  },
  created() {
    // 获取信息
    this.formInit()
    this.getExtraField()
  },
  methods: {
    formInit() {
      // 获取信息
      if (this.id) {
        this.getInfo()
      } else {
        this.info = {
          goodsName: '',
          categoryId: '',
          brandId: '',
          goodsAbstract: '',
          goodsIntro: '',
          thumb: '',
          credit: '',
          marketPrice: '',
          groupStart: null,
          groupEnd: null,
          isRecommend: 0,
          limitNums: '',
          stock: '',
          images: [],
          specs: [], // 规格
          status: 1,
          sort: ''
        }
      }
    },
    // 编辑信息
    getInfo() {
      this.$common.getInfo('/goods/' + this.id).then((data) => {
        if (data.code === 200) {
          const result = data.data
          this.info = result
        } else {
          this.$message.error(data.msg)
          // 跳转到目的路由
          this.$router.push({ name: 'GoodsList' })
        }
      })
    },
    getExtraField() {
      this.$common.handleGet('/goods/models').then((res) => {
        if (res.code === 200) {
          this.extraFieldList = res.data
        }
      })
    },
    // 暂无库存
    onStockChange(e) {
      console.log(`checked = ${e.target.checked}`)
      if (e.target.checked) this.info.stock = 0
    },
    // 提交
    onSubmit() {
      const { state, handleFormData } = this
      state.submitBtn = true
      // 验证表单
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.id ? handleFormData('/goods/' + this.id) : handleFormData('/goods/add')
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 表单数据处理
    handleFormData(url) {
      this.$common
        .handlePost(url, this.info)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            // 跳转到目的路由
            this.$router.push({ name: 'GoodsList' })
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
        .finally(() => {
          this.state.submitBtn = false
        })
    }
  }
}
</script>

<style>
.quill-editor {
  height: 85%;
}
</style>

<style scoped>
.imgList {
  width: 200px;
  height: 240px;
  float: left;
  margin-right: 10px;
}
.imgList img {
  width: 200px;
  height: 200px;
}
.imgList div {
  cursor: pointer;
}
.spec-item {
  display: inline-block;
  position: relative;
  margin-left: 10px;
}
.spec-item i {
  position: absolute;
  right: -5px;
  top: -5px;
}
.spec-span {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}
</style>
